<template>
  <el-table
    :data="tableData"
    :border="parentBorder"
    :preserve-expanded-content="preserveExpanded"
    style="width: 100%"
    height="500px" 
  >
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2" prop="id" >商品ID:{{ props.row.id }}</p>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="商品名称" prop="name" />
    <el-table-column label="商品分类" prop="category" />
    <el-table-column label="商品价格" prop="price" />
    <el-table-column label="商品图片">
     <template #default="scope">
      <img :src="scope.row.imgUrl" alt="商品图片" style="width: 100px; height: 100px;">
     </template>
    </el-table-column>
    <el-table-column label="商品描述" prop="goodsDesc" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"height="500px"
          :page-sizes="[5, 10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getgoods, delgoods } from '../../../api/account';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'; // 导入 ElMessage 和 ElMessageBox
import { serverUrl } from '../../../utils/commen';
import type { ComponentSize } from 'element-plus'; // 导入 ComponentSize

// 分页
const total = ref(0);
const currentPage4 = ref(1);
const pageSize4 = ref(5);
const size = ref<ComponentSize>('default');
const background = ref(false);
const disabled = ref(false);

// 定义商品数据类型，根据实际接口返回数据结构调整
interface User {
  id: number;
  name: string;
  category: string;
  price: string | number;
  imgUrl: string;
  goodsDesc: string;
}

// 将tableData定义为ref类型
const tableData = ref<User[]>([]);

const params = ref({
  currentPage: 1,
  pageSize: 5 // 将初始的 pageSize 设置为 5
});

// 处理每页数量变化
const handleSizeChange = (val: number) => {
  currentPage4.value = 1; // 重置当前页码
  params.value.currentPage = currentPage4.value;
  params.value.pageSize = val;
  getgoodslist(params.value);
};

// 处理当前页码变化
const handleCurrentChange = (val: number) => {
  params.value.currentPage = val;
  params.value.pageSize = pageSize4.value;
  getgoodslist(params.value);
};

const router = useRouter();
const goodsid = ref(null);

// 获取商品列表
const getgoodslist = async (msg) => {
  try {
    const data = await getgoods(msg);
    console.log(data);
    total.value = data.total; // 设置总条数
    if (data.data && Array.isArray(data.data)) {
      // 遍历数据，拼接完整的图片路径
      data.data.forEach(item => {
        item.imgUrl = serverUrl + item.imgUrl; // 拼接完整的图片路径
        // console.log(item.imgUrl);
        
      });
    }
    // 将返回的数据赋值给 tableData
    tableData.value = data.data; 
  } catch (error) {
    console.error('获取商品列表失败', error);
  }
};

// 初始获取商品列表
getgoodslist(params.value);


// 在组件挂载时调用获取数据方法
onMounted(() => {
  getgoodslist(params.value); 
});

//删除商品
const delgood = async (id:number)=>{
  try {
    const data = await delgoods({id});
    if(data.code === 0){
      ElMessage({
          type: 'success',
          message: '删除成功',
      });
      getgoodslist(params.value);
    }else{
      ElMessage({
          type: 'error',
          message: '删除失败',
      });
    }
  } catch (error) {
    console.error('删除商品失败', error);
  }
};

const parentBorder = ref(false)
const preserveExpanded = ref(false)

//编辑商品
const handleEdit = (index: number, row: User) => {
  router.push({
    path: 'goodsedit',
    query: {
      id: row.id.toString(),
      name: row.name,
      category: row.category,
      price: row.price.toString(), // 确保价格是字符串格式
      imgUrl: row.imgUrl,
      goodsDesc: row.goodsDesc
    }
  });
};

const handleDelete = (index: number, row: User) => {
  console.log(row);
  ElMessageBox.confirm(
    '确定删除该商品吗',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      delgood(row.id);
      const id={id:row.id};
      console.log(id);
    })
    .catch(() => {
    });
};
</script>    